<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
    <link rel="stylesheet" href="./static/css/reset.css">
    <link rel="stylesheet" href="./static/plus/eleme.css">
    <link rel="stylesheet" href="./static/css/style_xia.css">
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: all .5s;
            transform: translateY(0);
        }
        .fade-enter, .fade-leave-active {
            opacity: 0;
            transform: translateY(-100px);
        }

        .nav{
            font-size: 0;
        }
        .nav a{
            display: inline-block;
            width: 30%;
            height: 3rem;
            line-height: 3rem;
            margin-top:1rem;
            margin-right: 5%;
            text-align: center;
            font-size: 1.4rem;
            border:1px solid #d3d3d3;
            box-sizing: border-box;
            -webkit-border-radius:.5rem;
            -moz-border-radius:.5rem;
            border-radius:0.5rem;
            box-shadow: .5rem .5rem .5rem #d3d3d3;
        }
        .nav a:nth-child(3n){
            margin-right:0;
        }
    </style>
</head>
<body>
<div id="app" class="">
    <header>
        <a href="javascript:history.go(-1)" class="back"><img class="back-icon" src="./static/images/icon/left1.png" alt=""></a>
        <h1 class="title">测试</h1>
        <a class="right" @click="isShowBtnModel = true"><img src="./static/images/icon/index_icon.png" alt=""></a>
    </header>
    <section class="content">
        <div class="nav">
            <a href="./pages/apply_car.html">申请用车</a>
            <a href="./pages/apply_vacate.html">申请休假</a>
            <a href="./pages/apply_leave.html">申请外出</a>
            <a href="./pages/article_list.html">新闻列表</a>
            <a href="./pages/copy_data.html">数据拷出表单</a>
            <a href="./pages/meeting.html">一周会议安排</a>
            <a href="./pages/work_done.html">已完成工作</a>
            <a href="./pages/work_wait_do.html">未完成工作</a>
            <a href="./pages/form.html">通用表单</a>
        </div>
    </section>
    <footer>
        <div class="copy">
            <p class="text">© 2018 - 重庆市地理信息中心</p>
        </div>
    </footer>
    <!--showBtnModel-->
    <div class="p-fixed btn-model" v-show="isShowBtnModel">
        <transition name="btnModel">
            <div class="btn-items" v-show="isShowBtnModel">
                <button v-if="modelBtns" v-for="(item,index) in modelBtns" :key="index" class="item"
                        @click="getBtnCode(index)" v-text="item.name" :class="{red : item.id ===5}"></button>
                <button class="cancel" @click="isShowBtnModel = false">取消</button>
            </div>
        </transition>
    </div>
    <!--loading-->
    <div class="loading" v-show="isShow">
        <mt-spinner :type="0" :size="60"></mt-spinner>
    </div>
</div>
</body>
<script src="./static/plus/jquery-1.12.1.min.js"></script>
<script src="./static/plus/vue.js"></script>
<script src="./static/plus/eleme.js"></script>
<script src="./static/js/common.js"></script>
<script>
    window.onload = function () {
        var vm = new Vue({
            el: '#app',
            data:{
                isShow:true,
                rangeValue:37,
                modelBtns: [
                    {id: 1, name: '保存'},
                    {id: 2, name: '提交'},
                    {id: 3, name: '终止'},
                    {id: 4, name: '查看流程图'},
                    {id: 5, name: '删除'},
                    {id: 6, name: '完成'}
                ],
                isShowBtnModel: false,
            },
            methods:{
                getBtnCode(index) {
                    console.log('点击了第' + index + '个按钮');
                }
            },
            created() {
            },
            mounted() {
                setSectionHeight();
                this.isShow = false;
            }
        })
    }


</script>
</html>


